<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/airplane">机票查询</el-menu-item>
      <el-menu-item v-if="isPower && !isVisitor" index="/user"
        >用户列表</el-menu-item
      >
      <el-menu-item v-if="!isPower && !isVisitor" index="/ticket"
        >我的机票</el-menu-item
      >
      <el-button
      style="margin-top: 10px;margin-right: 10px;right: 0px;position: absolute;"
      type="danger"
      @click="loginOut()"
      v-if="!isVisitor"
      round
    >
      退出登录
    </el-button>

    <div style="margin-top: 10px;margin-right: 10px;right: 0px; position: absolute;">
      <el-button
        style="margin-top: 10px; margin-left: 10px;"
        size="mini"
        type="primary "
        @click="login()"
        v-if="isVisitor"
        round
      >
        登录
      </el-button>
      <el-button
        style="margin-top: 10px"
        size="mini"
        type="success"
        @click="register()"
        v-if="isVisitor"
        round
      >
        注册
      </el-button>
    </div>

    </el-menu>

    <router-view />

</div>
</template>
<script>
export default {
  data() {
    return {
      isPower: false,
      isVisitor: true,
      activeIndex: this.$route.path,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
    },
    loginOut() {
      window.sessionStorage.removeItem("userInfo");
      this.$router.push('/airplane');
      this.$router.go(0);
    },
    login() {
      this.$router.push("/login");
    },
    register() {
      this.$router.push("/register");
    }
  },
  created() {
    var user = JSON.parse(window.sessionStorage.getItem("userInfo"));
    if (user !== null) {
      this.isVisitor = false;
      this.isPower = user.power ? true : false;
    }
    console.log(this.$route.path);
  },
};
</script>
